<template>
  <div class="role-management">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="角色ID">
        <el-input v-model="searchForm.role_id" placeholder="请输入角色ID"></el-input>
      </el-form-item>
      <el-form-item label="角色名称">
        <el-input v-model="searchForm.roleName" placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item label="角色状态">
        <el-select v-model="searchForm.roleStatus" placeholder="请选择">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="角色权限">
        <el-input v-model="searchForm.permission_id"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 说明文字 -->
    <el-form :inline="true" class="description-form">
      <el-form-item label="角色说明">
        <el-input v-model="roleDescription" style="width: 500px"></el-input>
      </el-form-item>
    </el-form>

    <!-- 操作按钮组 -->
    <div class="operation-buttons">
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      <el-button icon="el-icon-edit" @click="handleEdit">编辑</el-button>
      <el-button type="primary" plain @click="handleImport">导入</el-button>
      <el-button type="primary" plain @click="handleExport">导出</el-button>
      <el-button type="success" plain @click="handleApply">启用</el-button>
      <el-button type="danger" plain @click="handleDisable">禁用</el-button>
      <el-button type="danger" @click="handleDelete">删除</el-button>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="role_id"
        label="角色ID">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称">
      </el-table-column>
      <el-table-column
        prop="permission_id"
        label="角色权限"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="roleStatus"
        label="角色状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.roleStatus === '1' ? 'success' : 'info'">
            {{ formatRoleStatus(scope.row.roleStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="250">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">查看</el-button>
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button 
            type="text" 
            @click="handleDisable(scope.row)"
            :disabled="scope.row.roleId === '1'">
            {{ scope.row.roleStatus === '1' ? '禁用' : '启用' }}
          </el-button>
          <el-button 
            type="text" 
            @click="handleDelete(scope.row)"
            :disabled="scope.row.roleId === '1'">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RoleManagement',
  data() {
    return {
      searchForm: {
        role_id: '',
        roleName: '',
        roleStatus: '',
        permission_id: ''
      },
      roleDescription: '',
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 100,
      selectedRows: []
    }
  },
  methods: {
    handleSearch() {
      // 实现搜索逻辑
    },
    resetForm() {
      this.searchForm = {
        role_id: '',
        roleName: '',
        roleStatus: '',
        permission_id: ''
      }
    },
 queryRoleList() {
     this.$axios.get('api/permission/queryRoleList').then(res=>{
      if(res.data.code==200){
        this.handleRoleData(res.data.data)
      }
     })
      
    },
    handleRoleData(data) {
      const processedData = [];
      
      Object.keys(data).forEach(roleId => {
        const rolePermissions = data[roleId];
        if (rolePermissions && rolePermissions.length > 0) {
          const baseInfo = rolePermissions[0];
          
          const permissions = rolePermissions
            .map(item => item.permissionId)
            .filter(id => id != null)
            .join(',');

          processedData.push({
            id: roleId,
            role_id: baseInfo.roleId,
            roleName: baseInfo.roleName,
            roleStatus: baseInfo.roleStatus,
            permission_id: permissions,
            roleDescription: '-',
            create_time: '',
            update_time: '',
            delete_status: 0
          });
        }
      });

      this.tableData = processedData;
    },
    formatRoleStatus(status) {
      return status === '1' ? '启用' : '禁用';
    },
    handleAdd() {
      // 实现新增逻辑
    },
    handleEdit(row) {
      // 实现编辑逻辑
    },
    handleImport() {
      // 实现导入逻辑
    },
    handleExport() {
      // 实现导出逻辑
    },
    handleApply() {
      // 实现启用逻辑
    },
    handleDisable(row) {
      // 实现禁用逻辑
    },
    handleDelete(row) {
      // 实现删除逻辑
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      // 重新加载数据
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // 重新加载数据
    }
  },
  created() {
    this.queryRoleList();
  }
}
</script>

<style scoped>
.role-management {
  padding: 20px;
}
.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}
.description-form {
  margin-bottom: 20px;
}
.operation-buttons {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
